import React, { useEffect, useState } from 'react';
import { Divider, Space, Input, Button, Table, Tag, Form } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import './servicelist.less';
import { connect } from 'umi';
import Delservice from '@/pages/components/delservice';
import Addservice from '@/pages/components/addservice';

type Props = {};
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const index = (props: any) => {
  const [data, setData] = useState([]);
  const [delopen, setDelopen] = useState(false);
  const [delId, setDelid] = useState('');
  const [kefuName, setkefuName] = useState('');
  const [addopen, setAddopen] = useState(false);
  const [type, setType] = useState('');
  const [deltype, setDeltype] = useState('');
  const [serviceid,setServiceid]=useState('')
  const columns: ColumnsType<DataType> = [
    {
      title: 'ID',
      dataIndex: 'kefu_id',
      key: 'kefu_id',
    },
    {
      title: '客服编码',
      dataIndex: 'kefu_code',
      key: 'kefu_code',
    },
    {
      title: '客服名称',
      dataIndex: 'kefu_name',
      key: 'kefu_name',
    },
    {
      title: '客服头像',
      key: 'kefu_avatar',
      dataIndex: 'kefu_avatar',
      render: (text) => (
        <img
          style={{ width: 50, height: 50 }}
          src={`http://fangadmin.shbwyz.com/` + text}
          alt=""
        />
      ),
    },
    {
      title: '在线状态',
      key: 'online_status',
      dataIndex: 'online_status',
      render: (text) => (
        <span>
          {text === 1 ? (
            <Tag color="success">在线</Tag>
          ) : (
            <Tag color="error">离线</Tag>
          )}
        </span>
      ),
    },
    {
      title: '创建时间',
      key: 'create_time',
      dataIndex: 'create_time',
    },
    {
      title: '操作',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, record) => (
        <Space>
          <Button
            size="small"
            style={{ background: '#009688', color: '#fff', fontSize: '12px' }}
            onClick={() => editname(_, record)}
          >
            编辑
          </Button>
          <Button
            size="small"
            style={{ background: '#FFB800', color: '#fff', fontSize: '12px' }}
            onClick={() => editpassword(_, record)}
          >
            修改密码
          </Button>
          <Button
            size="small"
            onClick={() => delservice(_, record)}
            style={{ background: '#FF5722', color: '#fff', fontSize: '12px' }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];
  const delservice = (value: any, data: any) => {
    // console.log(value,data);
    // console.log(data.kefu_id);
    setDelopen(true);
    setDelid(data.kefu_id);
    setkefuName(data.kefu_name);
    setDeltype('客服')
  };
  const closedels = () => {
    setDelopen(false);
    setAddopen(false);
  };
  useEffect(() => {
    props.list.length ? '' : props.dispatch({ type: 'area/getservicelist' });
  }, []);
  const addservice = () => {
    setAddopen(true);
    setType('addservice');
  };

  const editname=(value: any, data: any)=>{
    setAddopen(true);
    setkefuName(data.kefu_name)
    setServiceid(data.kefu_id)
    setType('editname');
  }
  const editpassword=(value: any, data: any)=>{
    setAddopen(true);
    setType('editpassword');
    setServiceid(data.kefu_id)
  }
  const onFinish = (values: any) => {
    console.log('Success:', values);
    props.dispatch({ type: 'area/searchservice', payload: values.kefu_name });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div>
      <header>
        <div className="h-text">搜索信息</div>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Space size={'small'}>
            <Form.Item name="kefu_name">
              <Input addonBefore="客服名称" />
            </Form.Item>
            
            {/* <Form.Item
              name="status"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
               <Input addonBefore="在线状态" />
            </Form.Item> */}

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button htmlType="submit">搜索</Button>
            </Form.Item>
          </Space>
        </Form>
      </header>
      <Button type="primary" onClick={addservice}>
        添加
      </Button>
      <Table columns={columns} dataSource={props.list} />
      <Delservice
        open={delopen}
        close={closedels}
        delId={delId}
        name={kefuName}
        type={deltype}
      ></Delservice>
      <Addservice open={addopen} close={closedels} type={type} name={kefuName} id={serviceid}></Addservice>
    </div>
  );
};

const mapStateToProps = ({ area }: any) => {
  const { list } = area;
  return {
    list,
  };
};

export default connect(mapStateToProps)(index);
